<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Rect节点分组</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 该案例演示以下功能：
       *  1、渲染群组所需要的数据结构；
       *  2、如何拖动一个群组；
       *  3、将节点从群组中拖出；
       *  4、将节点拖入到某个群组中；
       *  5、拖出拖入节点后动态改变群组大小。
       */
      G6.registerNode('rectNode', {
        draw(cfg, group) {
          const keyShape = group.addShape('rect', {
            attrs: {
              x: 0,
              y: 0,
              width: 80,
              height: 50,
              fill: '#87e8de',
            },
          });

          const text = group.addShape('text', {
            attrs: {
              x: 35,
              y: 25,
              textAlign: 'center',
              fill: 'blue',
              text: cfg.label,
            },
          });

          return keyShape;
        },
      });

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        fitView: true,
        defaultNode: {
          shape: 'rectNode',
          labelCfg: {
            position: 'center',
          },
        },
        defaultEdge: {
          color: '#bae7ff',
          style: {
            endArrow: true,
          },
        },
        modes: {
          default: ['drag-group', 'drag-node-with-group', 'collapse-expand-group'],
        },
        groupType: 'rect',
      });

      const data = {
        nodes: [
          {
            id: 'node6',
            groupId: 'group3',
            label: 'node6-group3',
            x: 100,
            y: 300,
          },
          {
            id: 'node1',
            label: 'node1-group1',
            groupId: 'group1',
            x: 100,
            y: 100,
          },
          {
            id: 'node2',
            label: 'node2-group2',
            groupId: 'p2',
            x: 150,
            y: 200,
          },
          {
            id: 'node3',
            label: 'node3-group2',
            // groupId: 'group2',
            x: 300,
            y: 100,
          },
          {
            id: 'node4',
            label: 'node6-group5',
            groupId: 'group5',
            x: 450,
            y: 200,
          },
          {
            id: 'node8',
            label: 'node8-group5',
            groupId: 'group5',
            x: 400,
            y: 100,
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
          {
            source: 'node2',
            target: 'node3',
          },
          {
            source: 'node1',
            target: 'node3',
          },
          {
            source: 'node6',
            target: 'node1',
          },
          {
            source: 'group5-custom-node',
            target: 'p2-custom-node',
          },
        ],
        groups: [
          {
            id: 'group3',
            parentId: 'p2',
            title: {
              text: '我的第一个群组',
              stroke: '#444',
              offsetX: 0,
              offsetY: 0,
            },
          },
          {
            id: 'p2',
            title: {
              text: '我的第2个群组',
              stroke: '#444',
              offsetX: 0,
              offsetY: 0,
            },
          },
          {
            id: 'group5',
          },
          {
            id: 'group1',
          },
        ],
      };

      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
